<template>
  <div class="order">
      <el-row>
        <el-col :span="8">
            <el-input placeholder="请输入内容" class="search-input" v-model="query" @keydown.native.enter="initList">
              <el-button slot="append" icon="el-icon-search" @click="initList"></el-button>
            </el-input>
        </el-col>
      </el-row>

      <el-table class="mt-15" :data="ordersList" border style="width:100%">
          <el-table-column type="index" label="#" width="50"></el-table-column>
          <el-table-column prop="order_number" label="订单编号"></el-table-column>
          <el-table-column prop="order_price" label="订单价格" width="120"></el-table-column>
          <el-table-column prop="order_pay" label="付款方式" width="120">
              <template slot-scope="scope">
                  <el-tag size="medium" effect="dark"
                  :type="scope.row.order_pay==0?'danger':scope.row.order_pay==1?'':scope.row.order_pay==2?'success':'warning'">
                    {{scope.row.order_pay==0?'未付款':scope.row.order_pay==1?'支付宝':scope.row.order_pay==2?'微信':'银行卡'}}
                  </el-tag>
              </template>
          </el-table-column>
          <el-table-column prop="is_send" label="是否发货" width="120">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.is_send=='否'" size="medium" type="danger" effect="dark">未发货</el-tag>
                    <el-tag v-if="scope.row.is_send=='是'" size="medium" effect="dark">已发货</el-tag>
                </template>
          </el-table-column>
          <el-table-column prop="update_time" label="下单时间">
              <template slot-scope="scope">
                  <span>{{ scope.row.create_time|formateTime}}</span>
              </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" icon="el-icon-edit" @click="editDzVisible=true"></el-button>
            <el-button size="mini" type="danger" icon="el-icon-location" @click="showPmDialog()"></el-button>
            <el-button size="mini" type="warning" plain icon="el-icon-check" @click="showEditDialog(scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="page">
        <el-pagination 
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="1"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="5"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
        </el-pagination>
      </div>
      <!-- 修改地址对话框 -->
      <el-dialog title="收货地址" :visible.sync="editDzVisible">
            <el-form :model="addressForm" lable-width="80px" :rules="rules">
                <el-form-item label="省市区/县" prop="text1" label-width="100px">
                    <el-cascader v-model="addressForm.text1" :options="citydata"></el-cascader>
                </el-form-item>
                <el-form-item label="详细地址" prop="text2" label-width="100px">
                    <el-input v-model="addressForm.text2" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editDzVisible=false">取消</el-button>
                <el-button type="primary" @click="editDzSubmit()">确认</el-button>
            </div>
      </el-dialog>
      <!-- 修改订单对话框 -->
      <el-dialog title="订单修改" :visible.sync="editOrdersVisible">
            <el-form :model="editForm" lable-width="80px" ref="editOrdersForm">
                <el-form-item label="下单用户id" label-width="100px" prop="user_id">
                    <el-input v-model="editForm.user_id" auto-complete="off" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="订单id" label-width="100px" prop="id">
                    <el-input v-model="editForm.id" auto-complete="off" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="订单编号" label-width="100px" prop="order_number">
                    <el-input v-model="editForm.order_number" auto-complete="off" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="订单价格" label-width="100px" prop="order_price">
                    <el-input v-model="editForm.order_price" auto-complete="off" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="付款方式" label-width="100px" prop="order_pay">
                    <el-select v-model="editForm.order_pay">
                        <el-option
                        v-for="item in tpay_status"
                        :key="item.value"
                        :label="item.lable"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否发货" label-width="100px" prop="is_send">
                    <el-select v-model="editForm.is_send">
                        <el-option value="1" label="已发货"></el-option>
                        <el-option value="0" label="未发货"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="下单时间" label-width="100px" prop="create_time">
                    <el-input v-model="editForm.create_time" auto-complete="off" :disabled="true"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editOrdersVisible=false">取消</el-button>
                <el-button type="primary" @click="editOrderSubmit('editOrdersForm')">确认</el-button>
            </div>
      </el-dialog>
      <!-- 物流对话框 -->
      <el-dialog title="物流进度" :visible.sync="postManDialog">
          <el-timeline>
              <el-timeline-item v-for="(activity,index) in postManList" :key="index"
              :timestamp="activity.ftime" :icon="activity.icon" :type="activity.type" :color="activity.color">
                  {{activity.context}}
              </el-timeline-item>
          </el-timeline>
          <div slot="footer" class="dialog-footer">
                <el-button @click="postManDialog=false">取消</el-button>
                <el-button type="primary" @click="postManDialog=false">确认</el-button>
            </div>
      </el-dialog>
  </div>
</template>

<script>
import {getOlders,getOldersById,editOrders,getPostMan} from '@/api/index'
import citydata from './citydata.js'
import db from './db.js'
let that

export default {
    data () {
        return {
            ordersList:[],
            query:'',
            pagenum:1,
            pagesize:5,
            total:0,
            editDzVisible:false,
            editOrdersVisible:false,
            postManDialog:false,
            addressForm:{
                text1:'',
                text2:''
            },
            citydata,
            rules: {
                text1: [
                    { required: true, message: '请输入省市区', trigger: 'blur' },
                ],
                text2: [
                    { required: true, message: '请输入详细地址', trigger: 'blur' },
                 ],
            },
            editForm:{
                id:'',//订单 ID
                user_id:'',
                order_number:'',//订单数量
                order_price:'',//订单价格
                order_pay:'',//订单支付
                is_send:'',//订单是否发货
                pay_status:'',//支付状态
                create_time:''
            },
            tpay_status:[{
                value:1,
                lable:'未支付'
            },{
                value:2,
                lable:'支付宝'
            },{
                value:3,
                lable:'微信'
            },{
                value:4,
                lable:'银行卡'
            }],
            postManList:[],//物流信息初始化
            db
        }
    },
    created(){
        this.initList()
    },
    methods:{
        async initList () {
            let {meta,data} = await getOlders({params:{query:this.query,pagenum:this.pagenum,pagesize:this.pagesize}})
            if(meta.status!==200) return this.$message.error({message:meta.msg})
            this.ordersList=data.goods
            this.total=data.total
            // console.log(this.ordersList);
        },
        //切换条数
        handleSizeChange(val){
            console.log(`当前每页${val}条`);
            this.pagesize=val
            this.initList()
        },
        //切换页码
        handleCurrentChange(val){
            console.log(`当前处于${val}页`);
            this.pagenum=val
            this.initList()
        },
        //显示修改地址对话框
        showEdit(){
            this.editOrdersVisible = true
        },
        //确认地址
        editDzSubmit(){
            this.editDzVisible=false
            this.$message.success({message:'修改成功'})
        },
        //显示修改订单
        async showEditDialog(row) {
            this.editOrdersVisible = true
            let {meta,data} = await getOldersById(row.order_id)
            if (meta.status!==200) return this.$message.error({message:meta.msg})
            this.editForm.id=data.order_id,
            this.editForm.user_id=data.user_id,
            this.editForm.create_time=data.create_time,
            this.editForm.order_price=data.order_price,
            this.editForm.order_number=data.order_number,
            this.editForm.order_pay=data.order_pay,
            this.editForm.is_send=data.is_send,
            this.editForm.pay_status=data.pay_status
            console.log(this.editForm);
        },
        //修改订单
        async editOrderSubmit(formName) {
            this.$refs[formName].validate(valide=>{
                if(valide)[
                    editOrders(this.editForm).then(res=>{
                        console.log(res);
                        if(res.meta.status!==201) return this.$message.error({message:res.meta.msg})
                        this.$message.success({message:res.meta.msg})
                        this.editOrdersVisible=false
                        this.initList() 
                    })
                ]
            })
        },
        //自定义方法
        getColor() {
            var arr = [
                '0',
                '1',
                '2',
                '3',
                '4',
                '5',
                '6',
                '7',
                '8',
                '9',
                'A',
                'B',
                'C',
                'D',
                'E',
                'F',
            ]
            var str = '#'
            for (var i = 0; i < 6; i++) {
              function getRandom(min, max) {
                return Math.floor(Math.random() * (max - min + 1)) + min
              }
              var re = arr[getRandom(0, arr.length - 1)]
              str += re
            }
            console.log(str.toLowerCase())
            return str.toLowerCase()
        },
        //显示获取地址
        async showPmDialog() {
            this.postManDialog = true
            // let {data,meta} = await getPostMan ({ id: 1106975712662 })
            // if(meta.status !==200 ) return this.$message.error({message:meta.msg})
            // console.log(data);
            // //对拿到的数据处理
            for(var i = 0; i<this.db.length;i++){
                //调用自己写的方法添加color字段
                let newStr = this.getColor()
                let obj = {type:'primary',icon:'el-icon-more',color:newStr}
                //偶数行的颜色为绿色
                i % 2 == 0 ? (obj.type='success') : (obj.type = 'primary')
                this.db[i] = {...this.db[i],...obj}
            }
            // console.log(data);
            // this.postManList = data
            this.postManList=this.db
        },
    },
    mounted () {
        that = this
    }
}
</script>

<style>

</style>